/**
 * 测试数据
*/


const vm = new Vue({
  el: "#app",
  data() {
    return {
          data:[
            {name:'电脑',price:2000,count:3},
            {name:'水杯',price:10,count:10},
            {name:'笔记本',price:2,count:15},
            {name:'鼠标',price:50,count:200},
            {name:'手机',price:4000,count:1}
          ]
        }
      },
      methods:{
        AllSelect(){
         
        },
        deleteEle(index){
          if(confirm("数据删除后无法恢复")){
            this.data.splice(index,1)
          }
          
          // this.data=Array.from(this.data).filter((x,index,arr)=>{
          //   return arr[index]!==list
          // })
        },
        increment(e){
          // el=e.target.parentElement.previousElementSibling.previousElementSibling
          // Array.from(this.data).map(v=>{
          //   if(el.innerText=v.name){
          //     v.count++
          //   }
          // })
          
          //   console.log(e)
        },
        decrement(list){
          if(list.count && list.count>=0){
            list.count--;
          }
        },
      },
      computed:{
          maxPrice(){
            list=Array.from(this.data).sort((o1,o2)=> o2.price-o1.price)[0]
           return list.name+"  ￥"+list.price
          },
          maxCountPrice(){
            name="未知"
            maxPrice=0;
            Array.from(this.data).map(m=>{
              if((m.price*m.count)>maxPrice){
                maxPrice=m.price*m.count
                name=m.name
              }
            })
            return name+"  ￥"+maxPrice
           },
          count(){
             sum=0;
             Array.from(this.data).map(v=>{
              sum+=v.price*v.count
             })
           return sum
          },
          reverseStr()/*申明了一个计算属性叫做reverseStr*/{
              /*计算属性一定要有一个返回结果*/
              /*访问data中的属性必须通过this*/
              return this.str.toUpperCase().split("").reverse().join("")
          }
      }
})


// const data = [
//   {name:'电脑',price:200,count:1},
//   {name:'水杯',price:10,count:10},
//   {name:'笔记本',price:2,count:15},
//   {name:'鼠标',price:50,count:1},
//   {name:'手机',price:4000,count:1}
// ]

// //将data中所有的数据渲染到页面的表格中去
// window.onload = function(){ // 浏览器加载完成页面的资源后触发的事件
//   const tab_body = document.querySelector('#tab_body')
//   // 遍历数据，得到每一个产品的对象
//   data.forEach(goods => {
//     let template = `
//                     <tr>
//                       <td><input type="checkbox" name="ch"></td>
//                       <td>${goods.name}</td>
//                       <td class="price">${goods.price}</td>
//                       <td>
//                           <button class="minus" onclick="minus(this)">-</button>
//                           <span class="count">${goods.count}</span>
//                           <button class="plus" onclick="plus(this)">+</button>
//                       </td>
//                       <td class="total">${goods.price * goods.count}</td>
//                       <td>
//                           <a href="javascript:void(0)" onclick="removeRow(this)">删除</a>
//                       </td>
//                   </tr>`
// 	// 为tab_body标签追加模板字符串
//     tab_body.innerHTML = tab_body.innerHTML + template
//   })
  
//   init()
  
  
//   document.querySelector("#all").onclick=function(e){
// 	  if(e.target.checked==true){
// 		Array.from(document.querySelectorAll("input[type=checkbox]")).map(v=>{
// 			v.checked=true
// 		})  
// 	  }else{
// 		Array.from(document.querySelectorAll("input[type=checkbox]")).map(v=>{
// 			v.checked=false
// 		})
// 	  }

//   }
// }

function minus(target){
  // console.log('你点击了减号',target);
  // target是当前触发事件的标签对象

  // 得到当前触发事件的按钮下一个兄弟节点span
  let span = target.nextElementSibling
  // 得到span的文本，并转换为number
  let count = Number(span.innerHTML)
  if (count > 1) { // 当count大于1时，才能够递减
    count--
    // 将修改后的count设置回span
    span.innerHTML = count

    // 得到减号按钮的父级td
    let td = target.parentElement
    // 得到父级td上一个兄弟节点；单价td
    let price_td = td.previousElementSibling
    // 得到单价
    let price = Number(price_td.innerHTML)
    // 单价 * 数量得到小计
    let total = price * count

    // 得到小计的td
    let total_td = td.nextElementSibling
    total_td.innerHTML = total

    // 计算总价
    let sum_total = document.querySelectorAll('.total')
    let sum = Array.from(sum_total)
         .map(tag => Number(tag.innerHTML)) // 获取每一个小计，转换为数字
         // 将所有的数字汇总
         .reduce((price1,price2) => price1 + price2)
    document.querySelector('.totalPrice').innerHTML = sum
  }
  
  init()
}

function plus(target){
	
  // console.log('你点击了加号',target);
  // 得到当前触发事件的按钮的上一个兄弟节点
  let span = target.previousElementSibling
  let count = Number(span.innerHTML)
  span.innerHTML = count + 1
  nextEle=target.parentElement.nextElementSibling
  parentEle=target.parentElement.previousElementSibling
  
  sum=parseInt(span.innerText)*parseInt(parentEle.innerText)
  nextEle.innerHTML=sum
  
  init()
}

function removeRow(target){
	reduce=parseInt(target.parentElement.previousElementSibling.innerHTML)
	totalPrice=document.querySelector(".totalPrice")
	target.parentElement.parentElement.remove()
	totalPrice.innerText=parseInt(totalPrice.innerText)-reduce
	// 当前触发事件的标签
	console.log(target);
}

function init(){
	count=0;
	goodsEle=document.querySelectorAll("tr")
	Array.from(goodsEle).filter((value,index,arr)=>{return index!=0}).map(v=>{
		console.log(v.children[3].getElementsByClassName("count")[0].innerText)
		count+=parseInt(v.children[3].getElementsByClassName("count")[0].innerText)*parseInt(v.children[2].innerText)
	
	})
	document.querySelector(".totalPrice").innerText=count
}



